<template>
  <div>
    <div class="outer">
      <div class="inner">
        <div class="block">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div class="block">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div class="block">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div class="block">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div class="block">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div class="block">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.outer {
  position: relative;

  margin: 0 auto;
  width: 298px;
  height: 12px;
  opacity: 1;
  box-sizing: border-box;
  border: 0.56px solid #979797;
  display: flex;
  align-items: center;
  justify-content: center;
  .inner {
    height: 8px;
    width: 290px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .block {
      width: 16px;
      height: 8px;
      display: flex;




      // .block1 {
      //   width: 8px;
      //   height: 8px;
      //   background-size: 8px 8px;
      //   background: linear-gradient(45deg, #fff 0% 50%, #000 50% 100%);
      // }
      // .block2 {
      //   width: 8px;
      //   height: 8px;
      //   background-size: 8px 8px;
      //   background: linear-gradient(45deg, #000 0% 50%, #fff 50% 100%);

      // }
    }
  }
}
</style>
